<template>
    <!-- 模态框 -->
    <div class="model">
        <!-- 不适用嵌套方式布局,避免后期事件冒泡的问题 -->
        <!-- 遮罩 -->
        <div class="mask" @click="changLogin1(false)"></div>
        <!-- 登录框 -->
        <div class="login">
            <!-- 关闭按钮 -->
            <div class="shut-down" @click="changLogin1(false)">
            </div>
            <!-- 导航 -->
            <section class="nav">
                <a href="#" :class="{ 'active': phoneLoginShow }" @click="phoneLoginShow = true">手机号登录</a>
                <span>|</span>
                <a href="#" :class="{ 'active': !phoneLoginShow }" @click="showQr">微信扫码登录</a>
            </section>
            <!-- 内容区域 -->
            <div class="content">
                <!-- 手机登录内容 -->
                <div class="phoneLogin" v-show="phoneLoginShow">
                    <div class="row">
                        <input type="text" placeholder="请输入手机号" class="ipt" v-model="phoneNum">
                    </div>
                    <div class="row">
                        <slide-verify :l="42" :r="20" :w="362" :h="140" :imgs="arr" @success="onSuccess" @fail="onFail"
                            @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"
                            :slider-text="msg">
                        </slide-verify>
                    </div>
                    <div class="row">
                        <input type="text" placeholder="请输入验证码" class="ipt" v-model="code">
                        <!-- <button class="btncode" @click="getCode">
                            {{ isShowCount ? count + "s" : "获取验证码" }}
                        </button> -->
                        <!-- 连续点击会触发getCode- 会创建多个定时器,造成递减混乱问题,可以使用两个按钮解决,一 -->
                        <button v-show="!isShowCount" @click="getcode" class="btncode">获取验证码</button>
                        <button v-show="isShowCount" class="btncode">{{ count }}s</button>
                    </div>
                    <div class="row">
                        <button class="btnlogin" @click="submitFn()">登录</button>
                    </div>
                </div>
                <!-- 微信扫码登录内容 -->
                <!-- 微信步骤二  提供一个容器-->
                <div v-show="!phoneLoginShow" id="weixin">
                    微信扫码登录内容
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
import { SendSMSAPT, PhoneReginAPT, BindingAPT } from "@/request/api"

import { valPhoneNumber } from "@/Utils/index"
export default {
    data() {
        return {
            phoneLoginShow: true,
            msg: "向右滑动",
            //背景图数组
            arr: [
                require('../assets/img/integral-01.9386d4bf.png'),
                require('../assets/img/integral-02.150d92a1.png'),
                require('../assets/img/integral-03.9870f3f1.png')
            ],
            // 手机号
            phoneNum: "13242825359",
            // 倒计时数字
            count: 59,
            // 是否显示倒计时
            isShowCount: false,
            code: ""
        }
    },
    methods: {
        ...mapMutations({
            // 引入改变登录的显示和隐藏
            changLogin1: "inshowloginmodel/changLogin",
            // 引入改变购物车的显示和隐藏
            changLogined: "isLoginshowed/changLogined",

            //引入改变提示框的显示和隐藏
            // changisToastShow: "isToastShow/changisToastShow"
        }),
        ...mapActions({
            // 提示框
            asyncChangisToastShow: "isToastShow/asyncChangisToastShow",
            // 用户信息
            asyncChangUserInfo: "userInfo/asyncChangUserInfo"
        }),
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        // 手机号和滑块验证
        toVurify() {
            //1 先判断手机号是否正确,不正确 提示
            // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            if (!valPhoneNumber(this.phoneNum)) {
                // alert("请输入正确的手机号")
                // this.changisToastShow({
                //     isshow: true,
                //     msg: "手机号不能为空1",
                //     type: ""
                // })
                // // 2秒隐藏提示框
                // setTimeout(() => {
                //     this.changisToastShow(false)
                // }, 2000)
                this.asyncChangisToastShow({
                    isshow: true,
                    msg: "请输入正确的手机号",
                    type: "warning"
                })
                return true
            }
            // 2判断模块验证码是否正确
            // 如果当前msg是 "再试一次" or "向右滑动" 提示
            if (this.msg == "再试一次" || this.msg == "向右滑动") {
                // alert("请滑动滑块")
                this.asyncChangisToastShow({
                    isshow: true,
                    msg: "请滑动滑块验证码",
                    type: "warning"
                })
                return true
            }
            // 函数默认返回undefined
            // 方法二
            // return true
        },
        // 倒计时
        countDown() {
            // 倒计时 循环定时器递减数字 count
            this.isShowCount = true
            let timer = setInterval(() => {
                this.count--
                if (this.count <= 0) {
                    this.count = 59
                    // 停止clear
                    clearInterval(timer)
                    this.isShowCount = false
                }
            }, 1000)
        },
        // 获取验证码
        async getcode() {
            // //1 先判断手机号是否正确,不正确 提示
            // // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            // if (!valPhoneNumber(this.phoneNum)) {
            //     alert("请输入正确的手机号")
            //     return
            // }
            // // 2判断模块验证码是否正确
            // // 如果当前msg是 "再试一次" or "向右滑动" 提示
            // if (this.msg == "再试一次" || this.msg == "向右滑动") {
            //     return alert("请滑动滑块")

            // }


            // 调用验证手机和滑块方法
            // 方法一
            // let flag = this.toVurify();
            // if (!flag) {//不通过是不往下执行
            //     return
            // }

            // 方法二
            // 有号码和滑块返回false 不执行 没有放回true 执行return
            if (this.toVurify()) return

            //  3 获取验证码,60s的倒计时
            // 然后发送请求
            let res = await SendSMSAPT({
                phone: this.phoneNum
            });
            // console.log("手机请求", res);

            // 方法一 
            // if (res.data.code == 0) {
            //     alert("发送成功")
            //     // 调用倒计时方式
            //     this.countDown()
            // } 
            // else {//如果失败,返回失败提示
            //     alert("发送失败" + res.data.message)
            // }

            // 方法二 配合拦截器
            if (!res) return
            // alert("发送成功")

            // 调用提示框
            this.asyncChangisToastShow({
                isshow: true,
                msg: "发送成功",
                type: "success"
            })
            // 调用倒计时方式
            this.countDown()
        },
        // 登录
        async submitFn() {
            // 如果当前msg是 "再试一次" or "向右滑动" 提示
            // if (this.msg == "再试一次" || this.msg == "向右滑动") {
            //     return alert("请滑动滑块")

            // }

            // 1:手机号是否正确
            // 2:滑块是否完成
            // 有号码和滑块返回false 不执行 没有放回true 执行return
            if (this.toVurify()) return

            // 3:验证码短信是否正确 (由于目前后台未返回正确的验证码.此处只做非空校验)

            if (this.code.trim() == "") {
                // alert("请输入验证码")
                this.asyncChangisToastShow({
                    isshow: true,
                    msg: "请输入验证码",
                    type: "warning"
                })
                return;
            };
            // 4:发送登录请求 分两种情况,有uuid 就关联微信,没有就普通的手机号验证码登录
            let res = null
            let uuid = localStorage.getItem("uuid")
            if (uuid) {
                res = await BindingAPT({
                    verifyCode: this.code,
                    phone: this.phoneNum,
                    uuid,
                    // nickName: "天生哥哥"
                })
            } else {
                res = await PhoneReginAPT({
                    verifyCode: this.code,
                    phone: this.phoneNum
                })
            }
            // console.log(res);
            if (!res) return
            // 1:提示登录成功
            this.asyncChangisToastShow({
                isshow: true,
                msg: "登录成功",
                type: "success"
            })
            // alert("登录成功")
            // 2:存储token 
            localStorage.setItem("x-auth-token", res.data["x-auth-token"])
            // 3:关闭模态框
            this.changLogin1(false)
            // 4:tobar中登录状态切换(修改vuex中isLogined的值)
            // 把登录修改成购物车
            this.changLogined(true)

            // 绑定1 清除code
            uuid && this.$router.push(this.$route.path)
            // 绑定 删除uuid
            localStorage.removeItem("uuid")



            // 获取用户信息并更新vuex的数据--手机号方式登录
            this.asyncChangUserInfo()

            /*
            尝试~~~
            1. 布局一个购物车按钮 
            2. vuex中loginStatus存储一个状态isLogined(是否登录的状态)
               store
                 loginStatus
                    index.js
            3. 根据isLogined来控制购物车按钮是否显示
               本地有token isLogined则为true ,本地无token 则为false
           
            最终效果,刷新后可以根据本地是否有token来控制是否显示购物车按钮.
            */
        },

        // 点击微信扫码登录
        showQr() {
            this.phoneLoginShow = false

            // 显示微信二维码步骤三,new 对象显示二维码
            // 申请微信登录二维码
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(
                    window.btoa("http://127.0.0.1:8080" + _this.$route.path)
                ),
                // 调用样式文件
                href: "data:text/css;base64,Lyog6ZqQ6JeP5LqM57u056CB5Lit55qE5paH5a2XMCAqLw0KLmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICAgIGRpc3BsYXk6IG5vbmU7DQp9",
            });
        }
    },
};
</script>

<style lang="less" scoped>
// scoped 只在当前组件有效
// 滑块验证码--子组件  /deep/

.model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);


    }

    .login {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url("@/assets/img/login-box-bg.png");
        text-align: center;

        .shut-down {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 60px;
            top: 18px;
            font-size: 40px;
            background: url(@/assets/img/close.png);
        }

        .nav {
            margin-top: 50px;

            span {
                margin: 0 10px;
            }

            a.active {
                color: #000;
            }
        }

        .nav a {
            text-decoration: none;
            color: gray;
            font-size: 20px;
        }

        .content {
            width: 350px;
            height: 200px;
            margin: 10px auto;
            // background-color: pink;

            .phoneLogin {
                .row {
                    display: flex;
                    margin-bottom: 20px;

                    .ipt {
                        height: 50px;
                        outline: none;
                        flex: 1;
                        text-indent: 1em;
                    }

                    .btncode {
                        background-color: #0a328e;
                        color: #fff;
                        margin-left: 10px;
                        border: none;
                        width: 80px;
                    }

                    .btnlogin {
                        width: 100%;
                        background-color: #0a328e;
                        color: #fff;
                        height: 50px;
                        border: none;
                    }
                }
            }
        }
    }
}


/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;

    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }

    .slide-verify-block {
        width: 85px;
        height: 136px;
    }

    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }

    &:hover {
        canvas {
            display: block;
        }

        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>